<!--  -->
<template>
  <div>
    <van-popup v-model="show" position="center" closeable round :style="{maxHeight: '70%'}" @closed='closed'>
      <div class="open_group">
        <p>以下小伙伴拼团中，可直接参与</p>
        <div class="setMaxH">
          <div id="groupListCell" v-for="item in list" :key="item.id">
            <div class="into_user">
              <div class="user">
                <img :src="item.has_one_leader.avatar_image" />
              </div>

              <ul class="time">
                <li class="time_a">{{ item.has_one_leader.username }} 开{{ item.has_one_level.member_num }}人团</li>
                <li class="time_b">
                  剩余<span style="display: inline-block;"> <van-count-down class="vanCount" :time="fun.getTimeDifference(item.end_time)" format="DD天HH时mm分ss秒" @finish="finished"></van-count-down></span>,仅差<span>{{
                    item.has_one_level.member_num - item.has_many_success_member_count
                  }}</span
                  >人
                </li>
              </ul>
              <button type="button" @click.stop="clickAdd('add',item)" v-if="!(item.leader_id == uid) ? true : false">加入该团</button>
              <button type="button" @click.stop="clickAdd('share',item)" v-else>邀请好友</button>
            </div>
          </div>
          <span v-if="page < total_page" @click="getList()">点击加载更多</span>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
export default {
  props: {
    id: {
      type: [String, Number],
      default: ""
    },
    value: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    value(val) {
      if (val) this.init();
    }
  },
  data() {
    return {
      uid: window.localStorage.getItem("uid"),
      show: false,
      list: [],
      page: 0, //分页数，当前页数
      isLoadMore: true, //判断是否要加载更多的标志
      total_page: 0 //总页数
    };
  },
  // mounted: {},
  methods: {
    init() {
      this.list = [];
      this.page = 0; //分页数，当前页数
      this.isLoadMore = true; //判断是否要加载更多的标志
      this.total_page = 0; //总页数

      this.getList();
    },
    getList() {
      if (this.page!=0&&this.total_page == this.page) {
        return;
      }
      let page = this.page + 1;
      $http
        .get("plugin.ywm-fight-groups.frontend.controllers.fight-groups-goods.all-team", { page: page, id: this.id }, "加载中")
        .then(res => {
          if (res.result == 1) {
            this.total_page = res.data.last_page;
            this.page = res.data.current_page;

            let nextPageData = res.data.data;
            this.list = this.list.concat(nextPageData); //进行数组拼接
            this.show = true;
          } else {
            this.$toast(res.msg);
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    closed(){
      this.show = false;
      this.$emit('input', false);
    },
    finished(){},
     //加入该团按钮
    clickAdd(tag,item) {
      if (tag == "share") {
        let json = {
          title: item.has_one_group.desc_title, // 分享标题
          desc: item.has_one_group.desc_content, // 分享描述
          link: `${this.fun.getSiteRoot()}/addons/yun_shop/?menu#/group_detail/${item.has_one_group.id}?i=${this.fun.getKeyByI()}&mid=${uid}&plu=ywm`, // 分享链接
        };
        this.shareWeixin(json);
        return;
      }

      if (tag == "add") {
        //点击参团
        this.$router.push(this.fun.getUrl('GroupDetail', { id: item.has_one_group.id }, { plu: 'ywm' }));
      }
    },
    shareWeixin(json){
      if (this.fun.getTyep() == 7 || this.fun.isCPS()) {
        this.appShare(json);
        return;
      } else if (this.fun.getTyep() == 5) {
        //不是微信端 不访问
        return;
      }
      this.fun.wxShare(
        "",
        {},
        {
          title: json.title,
          imgUrl: json.imgUrl,
          description: json.desc,
          link: json.link
        }
      );
      this.$dialog.alert({ message: "请点击右上角微信分享" });
    },
    //app分享设置
    appShare(json) {
      if (this.fun.isCPS()) {
        if (this.fun.isIosOrAndroid() === "ios") {
          shareByH5IOS({ body: "shareByH5IOS", json: JSON.stringify(json) });
        } else {
          console.log(JSON.stringify(json));
          shareByH5Android(JSON.stringify(json));
        }
      } else {
        YDB.Share(json.title, json.desc, json.imgUrl, json.link, "Sharesback");
      }
    }
  },
  components: {},
  computed: {}
};
</script>
<style lang='scss' scoped>
.open_group {
  background: #fff;
  padding: 0.625rem;
  border-radius: 0.5rem;
  width: 19rem;

  p {
    font-size: 14px;
    margin-bottom: 0.625rem;
  }

  .setMaxH {
    max-height: 12rem;
    overflow: scroll;
  }

  #groupListCell {
    margin: 0.5rem 0;

    .into_user {
      display: flex;
      align-items: center;

      .user {
        width: 2.25rem;
        height: 2.25rem;
        background: #f2f2f2;
        border-radius: 2rem;
        overflow: hidden;
        margin-right: 0.625rem;
        flex-shrink: 0;

        img {
          width: 100%;
          height: 100%;
        }
      }

      .time {
        width: 14.3125rem;
        text-align: left;

        .time_a {
          font-size: 14px;
        }

        .time_b {
          font-size: 12px;
          color: #8c8c8c;

          span {
            color: #f15353;
          }

          .vanCount {
            color: #f15353;
            font-size: 12px;
          }
        }
      }

      button {
        border: none;
        background: #f15353;
        color: #fff;
        width: 4.5rem;
        height: 1.625rem;
        border-radius: 0.25rem;
        font-size: 10px;
      }
    }
  }
}
</style>